<script setup lang="ts">
import { ref } from 'vue'

import { storeToRefs } from 'pinia'
import { useUserInfoStore } from '@/stores/userinfo';   //导入用户信息状态库
const userInfoStore = useUserInfoStore()
const { user } = storeToRefs(userInfoStore)

console.log(user);


const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<template>
    <div>

        <div class="top">
            <router-link to="/">
                <!-- <div class="topLeft">我是首页</div> -->
                <div class="topLeft"><img src="../../assets/img/logo01.png" alt=""></div>
            </router-link>
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :label="false">expand</el-radio-button>
                <el-radio-button :label="true">collapse</el-radio-button>
            </el-radio-group>


            <router-link to="/setting">
                <div class="topUserinfo">
                    <div><img class="head" :src="user.head" alt=""></div>
                <div class="topRight">
                    {{user.name}}
                </div>
                </div>
            </router-link>
        </div>

        <div class="bigBox">

            <el-menu router default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
                @close="handleClose" background-color="#273142" text-color="#fff">

         
                <!-- <el-sub-menu index="/">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>人员管理</span>
                    </template>
                    
                    <el-menu-item-group>
                 

                        <el-menu-item index="/">人员管理模块1-1</el-menu-item>
                        <el-menu-item index="/member">人员管理模块1-2</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu> -->

                <el-menu-item index="/home">
                    <el-icon><House /></el-icon>
                    <template #title>首页</template>
                </el-menu-item>

                <el-menu-item index="/member">
                    <el-icon>
                        <User />
                    </el-icon>
                    <template #title>人员管理</template>
                </el-menu-item>

                <el-menu-item index="/cart">
                    <el-icon>
                        <document />
                    </el-icon>
                    <template #title>查看购物车列表</template>
                </el-menu-item>

                <el-menu-item index="/goods">
                    <el-icon><Goods /></el-icon>
                    <template #title>商品管理</template>
                </el-menu-item>

                <el-menu-item index="/station">
                    <el-icon><LocationInformation /></el-icon>
                    <template #title>自提点管理</template>
                </el-menu-item>

                <el-menu-item index="/organization">
                    <el-icon><OfficeBuilding /></el-icon>
                    <template #title>组织管理</template>
                </el-menu-item>
                <el-menu-item index="/role">
                    <el-icon>
                        <User />
                    </el-icon>
                    <template #title>角色管理</template>
                </el-menu-item>
                <el-menu-item index="/setting">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <template #title>系统设置</template>
                </el-menu-item>
                <el-menu-item index="/canvas">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <template #title>Canvas</template>
                </el-menu-item>
            </el-menu>

            <div class="viewBox"><router-view></router-view></div>
        
        </div>


    </div>
</template>





<style>
.viewBox {
    width: 100%;
}

.bigBox {
    display: flex;
}

.menuRightLogo {
    width: 20px;
    height: 20px;
}

.menu {
    width: 300px;
    background-color: #273142;
    height: 94vh;
}

.menuSmallBox {
    height: 4vh;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    line-height: 5vh;
    align-items: center;
    border-bottom: 2px solid #ddd;
    cursor: pointer;
}
</style>

<style scoped>
.top {
    height: 6vh;
    background-color: #1488c6;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    align-items: center;
}

.top .topLeft {
    color: #fff;
    font-size: 20px;
    line-height: 6vh;
    cursor: pointer;
    /* background-color: aqua; */
}

.top .topLeft img {
    height: 6vh;
}

.top .topRight {
    color: #fff;
    font-size: 20px;
    line-height: 6vh;
    text-align: right;
    cursor: pointer;
    /* background-color: aqua; */
}
.topUserinfo{
    display: flex;
    align-items: center;
}

.head{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-right: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 300px;
    min-height: 94vh;
}

.el-menu.el-menu--collapse {
    height: 94vh;
}
.viewBox{
 position: relative;
}

</style>